<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='global-property-'>/**
</span> * @ignore
 * table dialog
 * @author yiminghe@gmail.com
 */
KISSY.add(&quot;editor/plugin/table/dialog&quot;, function (S, Editor, Dialog4E, MenuButton) {
    var Node = S.Node,
        Dom = S.DOM,
        trim = S.trim,
        showBorderClassName = &quot;ke_show_border&quot;,
        collapseTableClass = &quot;k-e-collapse-table&quot;,
        IN_SIZE = 6,
        alignStyle = 'margin:0 5px 0 0;',
        TABLE_HTML = &quot;&lt;div style='padding:20px 20px 10px 20px;'&gt;&quot; +
            &quot;&lt;table class='{prefixCls}editor-table-config' style='width:100%'&gt;&quot; +
            &quot;&lt;tr&gt;&quot; +
            &quot;&lt;td&gt;&quot; +
            &quot;&lt;label&gt;行数： &quot; +
            &quot;&lt;input &quot; +
            &quot; data-verify='^(?!0$)\\d+$' &quot; +
            &quot; data-warning='行数请输入正整数' &quot; +
            &quot; value='2' &quot; +
            &quot; class='{prefixCls}editor-table-rows {prefixCls}editor-table-create-only {prefixCls}editor-input' &quot; +
            &quot;style='&quot; + alignStyle + &quot;'&quot; +
            &quot; size='&quot; +
            IN_SIZE +
            &quot;'&quot; +
            &quot; /&gt;&quot; +
            &quot;&lt;/label&gt;&quot; +
            &quot;&lt;/td&gt;&quot; +
            &quot;&lt;td&gt;&quot; +
            &quot;&lt;label&gt;宽&amp;nbsp;&amp;nbsp;&amp;nbsp;度： &quot; +
            &quot;&lt;/label&gt; &quot; +
            &quot;&lt;input &quot; +
            &quot; data-verify='^(?!0$)\\d+$' &quot; +
            &quot; data-warning='宽度请输入正整数' &quot; +
            &quot;value='200' &quot; +
            &quot;style='&quot; +
            alignStyle + &quot;' &quot; +
            &quot;class='{prefixCls}editor-table-width {prefixCls}editor-input' &quot; +
            &quot;size='&quot; + IN_SIZE + &quot;'/&gt;&quot; +

            &quot;&lt;select class='{prefixCls}editor-table-width-unit' title='宽度单位'&gt;&quot; +
            &quot;&lt;option value='px'&gt;像素&lt;/option&gt;&quot; +
            &quot;&lt;option value='%'&gt;百分比&lt;/option&gt;&quot; +
            &quot;&lt;/select&gt;&quot; +
            &quot;&lt;/td&gt;&quot; +
            &quot;&lt;/tr&gt;&quot; +
            &quot;&lt;tr&gt;&quot; +
            &quot;&lt;td&gt;&quot; +
            &quot;&lt;label&gt;列数： &quot; +
            &quot;&lt;input &quot; +
            &quot; data-verify='^(?!0$)\\d+$' &quot; +
            &quot; data-warning='列数请输入正整数' &quot; +
            &quot;class='{prefixCls}editor-table-cols {prefixCls}editor-table-create-only {prefixCls}editor-input' &quot; +
            &quot;style='&quot; + alignStyle + &quot;'&quot; +
            &quot;value='3' &quot; +
            &quot;size='&quot; +
            IN_SIZE + &quot;'/&gt;&quot; +
            &quot;&lt;/label&gt;&quot; +
            &quot;&lt;/td&gt;&quot; +
            &quot;&lt;td&gt;&quot; +
            &quot;&lt;label&gt;&quot; +
            &quot;高&amp;nbsp;&amp;nbsp;&amp;nbsp;度： &quot; +
            &quot;&lt;/label&gt;&quot; +
            &quot;&lt;input &quot; +
            &quot; data-verify='^((?!0$)\\d+)?$' &quot; +
            &quot; data-warning='高度请输入正整数' &quot; +
            &quot;value='' &quot; +
            &quot;style='&quot; +
            alignStyle + &quot;'&quot; +
            &quot;class='{prefixCls}editor-table-height {prefixCls}editor-input' &quot; +
            &quot;size='&quot; + IN_SIZE + &quot;'/&gt;&quot; +
            &quot; &amp;nbsp;像素&quot; +
            &quot;&lt;/td&gt;&quot; +
            &quot;&lt;/tr&gt;&quot; +
            &quot;&lt;tr&gt;&quot; +
            &quot;&lt;td&gt;&quot; +
            &quot;&lt;label&gt;对齐： &lt;/label&gt;&quot; +
            &quot;&lt;select class='{prefixCls}editor-table-align' title='对齐'&gt;&quot; +
            &quot;&lt;option value=''&gt;无&lt;/option&gt;&quot; +
            &quot;&lt;option value='left'&gt;左对齐&lt;/option&gt;&quot; +
            &quot;&lt;option value='right'&gt;右对齐&lt;/option&gt;&quot; +
            &quot;&lt;option value='center'&gt;中间对齐&lt;/option&gt;&quot; +
            &quot;&lt;/select&gt;&quot; +
            &quot;&lt;/td&gt;&quot; +
            &quot;&lt;td&gt;&quot; +
            &quot;&lt;label&gt;标题格：&lt;/label&gt; &quot; +
            &quot;&lt;select class='{prefixCls}editor-table-head {prefixCls}editor-table-create-only' title='标题格'&gt;&quot; +
            &quot;&lt;option value=''&gt;无&lt;/option&gt;&quot; +
            &quot;&lt;option value='1'&gt;有&lt;/option&gt;&quot; +
            &quot;&lt;/select&gt;&quot; +
            &quot;&lt;/td&gt;&quot; +
            &quot;&lt;/tr&gt;&quot; +
            &quot;&lt;tr&gt;&quot; +
            &quot;&lt;td&gt;&quot; +
            &quot;&lt;label&gt;边框： &quot; +
            &quot;&lt;input &quot; +
            &quot; data-verify='^\\d+$' &quot; +
            &quot; data-warning='边框请输入非负整数' &quot; +
            &quot;value='1' &quot; +
            &quot;style='&quot; +
            alignStyle + &quot;'&quot; +
            &quot;class='{prefixCls}editor-table-border {prefixCls}editor-input' &quot; +
            &quot;size='&quot; + IN_SIZE + &quot;'/&gt;&quot; +
            &quot;&lt;/label&gt; &amp;nbsp;像素&quot; +
            &quot; &quot; +
            '&lt;label&gt;&lt;input ' +
            'type=&quot;checkbox&quot; ' +
            'style=&quot;vertical-align: middle; margin-left: 5px;&quot; ' +
            'class=&quot;{prefixCls}editor-table-collapse&quot; ' +
            '/&gt; 合并边框' +
            &quot;&lt;/label&gt;&quot; +
            &quot;&lt;/td&gt;&quot; +
            &quot;&lt;td&gt;&quot; +
            &quot;&lt;label &quot; +
            &quot;class='{prefixCls}editor-table-cellpadding-holder'&quot; +
            &quot;&gt;边&amp;nbsp;&amp;nbsp;&amp;nbsp;距： &quot; +
            &quot;&lt;input &quot; +
            &quot; data-verify='^(\\d+)?$' &quot; +
            &quot; data-warning='边框请输入非负整数' &quot; +
            &quot;value='0' &quot; +
            &quot;style='&quot; +
            alignStyle + &quot;'&quot; +
            &quot;class='{prefixCls}editor-table-cellpadding {prefixCls}editor-input' &quot; +
            &quot;size='&quot; + IN_SIZE + &quot;'/&gt;&quot; +
            &quot; &amp;nbsp;像素&lt;/label&gt;&quot; +
            &quot;&lt;/td&gt;&quot; +
            &quot;&lt;/tr&gt;&quot; +
            &quot;&lt;tr&gt;&quot; +
            &quot;&lt;td colspan='2'&gt;&quot; +
            &quot;&lt;label&gt;&quot; +
            &quot;标题： &quot; +
            &quot;&lt;input &quot; +
            &quot;class='{prefixCls}editor-table-caption {prefixCls}editor-input' &quot; +
            &quot;style='width:380px;&quot; +
            alignStyle + &quot;'&gt;&quot; +
            &quot;&lt;/label&gt;&quot; +
            &quot;&lt;/td&gt;&quot; +
            &quot;&lt;/tr&gt;&quot; +
            &quot;&lt;/table&gt;&quot; +
            &quot;&lt;/div&gt;&quot;,
        footHTML = &quot;&lt;div style='padding:5px 20px 20px;'&gt;&quot; +
            &quot;&lt;a &quot; +
            &quot;class='{prefixCls}editor-table-ok {prefixCls}editor-button ks-inline-block' &quot; +
            &quot;style='margin-right:20px;'&gt;确定&lt;/a&gt; &quot; +
            &quot;&lt;a &quot; +
            &quot;class='{prefixCls}editor-table-cancel {prefixCls}editor-button ks-inline-block'&gt;取消&lt;/a&gt;&quot; +
            &quot;&lt;/div&gt;&quot;,
        addRes = Editor.Utils.addRes,
        destroyRes = Editor.Utils.destroyRes;

    function replacePrefix(str, prefix) {
        return S.substitute(str, {
            prefixCls: prefix
        });
    }

    function valid(str) {
        return trim(str).length != 0;
    }

    function TableDialog(editor) {
        var self = this;
        self.editor = editor;
        Editor.Utils.lazyRun(self, &quot;_prepareTableShow&quot;, &quot;_realTableShow&quot;);
    }

    S.augment(TableDialog, {
        _tableInit: function () {
            var self = this,
                prefixCls = self.editor.get('prefixCls'),
                d = new Dialog4E({
                    width: &quot;500px&quot;,
                    mask: true,
                    headerContent: &quot;表格&quot;, //属性&quot;,
                    bodyContent: replacePrefix(TABLE_HTML, prefixCls),
                    footerContent: replacePrefix(footHTML, prefixCls)
                }).render(),
                dbody = d.get(&quot;body&quot;),
                foot = d.get(&quot;footer&quot;);
            d.twidth = dbody.one(replacePrefix(&quot;.{prefixCls}editor-table-width&quot;, prefixCls));
            d.theight = dbody.one(replacePrefix(&quot;.{prefixCls}editor-table-height&quot;, prefixCls));
            d.tborder = dbody.one(replacePrefix(&quot;.{prefixCls}editor-table-border&quot;, prefixCls));
            d.tcaption = dbody.one(replacePrefix(&quot;.{prefixCls}editor-table-caption&quot;, prefixCls));
            d.talign = MenuButton.Select.decorate(dbody.one(replacePrefix(&quot;.{prefixCls}editor-table-align&quot;, prefixCls)), {
                prefixCls: replacePrefix('{prefixCls}editor-big-', prefixCls),
                width: 80,
                menuCfg: {
                    prefixCls: replacePrefix('{prefixCls}editor-', prefixCls),
                    render: dbody
                }
            });
            d.trows = dbody.one(replacePrefix(&quot;.{prefixCls}editor-table-rows&quot;, prefixCls));
            d.tcols = dbody.one(replacePrefix(&quot;.{prefixCls}editor-table-cols&quot;, prefixCls));
            d.thead = MenuButton.Select.decorate(dbody.one(replacePrefix(&quot;.{prefixCls}editor-table-head&quot;, prefixCls)), {
                prefixCls: replacePrefix('{prefixCls}editor-big-', prefixCls),
                width: 80,
                menuCfg: {
                    prefixCls: replacePrefix('{prefixCls}editor-', prefixCls),
                    render: dbody
                }
            });
            d.cellpaddingHolder = dbody.one(replacePrefix(&quot;.{prefixCls}editor-table-cellpadding-holder&quot;, prefixCls));
            d.cellpadding = dbody.one(replacePrefix(&quot;.{prefixCls}editor-table-cellpadding&quot;, prefixCls));
            d.tcollapse = dbody.one(replacePrefix(&quot;.{prefixCls}editor-table-collapse&quot;, prefixCls));
            var tok = foot.one(replacePrefix(&quot;.{prefixCls}editor-table-ok&quot;, prefixCls)),
                tclose = foot.one(replacePrefix(&quot;.{prefixCls}editor-table-cancel&quot;, prefixCls));
            d.twidthunit = MenuButton.Select.decorate(dbody.one(replacePrefix(&quot;.{prefixCls}editor-table-width-unit&quot;, prefixCls)), {
                prefixCls: replacePrefix('{prefixCls}editor-big-', prefixCls),
                width: 80,
                menuCfg: {
                    prefixCls: replacePrefix('{prefixCls}editor-', prefixCls),
                    render: dbody
                }
            });
            self.dialog = d;
            tok.on(&quot;click&quot;, self._tableOk, self);

            tclose.on(&quot;click&quot;, function (ev) {
                ev &amp;&amp; ev.halt();
                d.hide();
            });
            addRes.call(self, d, d.twidthunit, tok, tclose);
        },
        _tableOk: function (ev) {
            ev &amp;&amp; ev.halt();
            var self = this,
                tableDialog = self.dialog,
                inputs = tableDialog.get(&quot;el&quot;).all(&quot;input&quot;);

            if (tableDialog.twidthunit.get(&quot;value&quot;) == &quot;%&quot;) {
                var tw = parseInt(tableDialog.twidth.val());
                if (
                    !tw || (
                        tw &gt; 100 ||
                            tw &lt; 0
                        )
                    ) {
                    alert(&quot;宽度百分比：&quot; + &quot;请输入1-100之间&quot;);
                    return;
                }
            }
            var re = Editor.Utils.verifyInputs(inputs);
            if (!re) return;
            self.dialog.hide();
            setTimeout(function () {
                if (!self.selectedTable) {
                    self._genTable();
                } else {
                    self._modifyTable();
                }
            }, 0);
        },
        _modifyTable: function () {
            var self = this,
                d = self.dialog,
                selectedTable = self.selectedTable,
                caption = selectedTable.one(&quot;caption&quot;),
                talignVal = d.talign.get(&quot;value&quot;),
                tborderVal = d.tborder.val();

            if (valid(talignVal))
                selectedTable.attr(&quot;align&quot;, trim(talignVal));
            else
                selectedTable.removeAttr(&quot;align&quot;);

            if (valid(tborderVal)) {
                selectedTable.attr(&quot;border&quot;, trim(tborderVal));
            } else {
                selectedTable.removeAttr(&quot;border&quot;);
            }
            if (!valid(tborderVal) || tborderVal == &quot;0&quot;) {
                selectedTable.addClass(showBorderClassName, undefined);
            } else {
                selectedTable.removeClass(showBorderClassName, undefined);
            }

            if (valid(d.twidth.val()))
                selectedTable.css(&quot;width&quot;,
                    trim(d.twidth.val()) + d.twidthunit.get(&quot;value&quot;));
            else
                selectedTable.css(&quot;width&quot;, &quot;&quot;);
            if (valid(d.theight.val()))
                selectedTable.css(&quot;height&quot;,
                    trim(d.theight.val()));
            else
                selectedTable.css(&quot;height&quot;, &quot;&quot;);

            if (d.tcollapse[0].checked) {
                selectedTable.addClass(collapseTableClass, undefined);
            } else {
                selectedTable.removeClass(collapseTableClass, undefined);
            }

            d.cellpadding.val(parseInt(d.cellpadding.val()) || 0);
            if (self.selectedTd)self.selectedTd.css(&quot;padding&quot;, d.cellpadding.val());
            if (valid(d.tcaption.val())) {
                var tcv = S.escapeHtml(trim(d.tcaption.val()));
                if (caption &amp;&amp; caption[0])
                    caption.html(tcv);
                else {
                    //不能使用dom操作了, ie6 table 报错
                    //http://msdn.microsoft.com/en-us/library/ms532998(VS.85).aspx
                    var c = selectedTable[0].createCaption();
                    Dom.html(c, &quot;&lt;span&gt;&quot;
                        + tcv
                        + &quot;&lt;/span&gt;&quot;);
                    // new Node(&quot;&lt;caption&gt;&lt;span&gt;&quot; + tcv + &quot;&lt;/span&gt;&lt;/caption&gt;&quot;);
                    // .insertBefore(selectedTable[0].firstChild);
                }
            } else if (caption) {
                caption.remove();
            }

        },
        _genTable: function () {
            var self = this,
                d = self.dialog,
                html = &quot;&lt;table &quot;,
                i,
                cols = parseInt(d.tcols.val()) || 1,
                rows = parseInt(d.trows.val()) || 1,
            //firefox 需要 br 才能得以放置焦点
            //cellPad = UA['ie'] ? &quot;&amp;nbsp;&quot; : &quot;&amp;nbsp;&lt;br/&gt;&quot;,
                cellPad = S.UA.ie ? '' : '&lt;br/&gt;',
                editor = self.editor;

            if (valid(d.talign.get(&quot;value&quot;)))
                html += &quot;align='&quot; + trim(d.talign.get(&quot;value&quot;)) + &quot;' &quot;;

            if (valid(d.tborder.val()))
                html += &quot;border='&quot; + trim(d.tborder.val()) + &quot;' &quot;;

            var styles = [];


            if (valid(d.twidth.val())) {
                styles.push(&quot;width:&quot; + trim(d.twidth.val())
                    + d.twidthunit.get(&quot;value&quot;) + &quot;;&quot;);
            }

            if (valid(d.theight.val())) {
                styles.push(&quot;height:&quot; + trim(d.theight.val()) + &quot;px;&quot;);
            }

            if (styles.length) {
                html += &quot;style='&quot; + styles.join(&quot;&quot;) + &quot;' &quot;;
            }

            var classes = [];

            if (!valid(d.tborder.val())
                || String(trim(d.tborder.val())) == &quot;0&quot;) {
                classes.push(showBorderClassName);
            }

            if (d.tcollapse[0].checked) {
                classes.push(collapseTableClass);
            }
            if (classes.length) {
                html += &quot;class='&quot; + classes.join(&quot; &quot;) + &quot;' &quot;;
            }

            html += &quot;&gt;&quot;;
            if (valid(d.tcaption.val())) {
                html += &quot;&lt;caption&gt;&lt;span&gt;&quot; + S.escapeHtml(trim(d.tcaption.val()))
                    + &quot;&lt;/span&gt;&lt;/caption&gt;&quot;;
            }
            if (d.thead.get(&quot;value&quot;)) {
                html += &quot;&lt;thead&gt;&quot;;
                html += &quot;&lt;tr&gt;&quot;;
                for (i = 0; i &lt; cols; i++) {
                    html += &quot;&lt;th&gt;&quot; + cellPad + &quot;&lt;/th&gt;&quot;;
                }
                html += &quot;&lt;/tr&gt;&quot;;
                html += &quot;&lt;/thead&gt;&quot;;
                rows -= 1;
            }

            html += &quot;&lt;tbody&gt;&quot;;
            for (var r = 0; r &lt; rows; r++) {
                html += &quot;&lt;tr&gt;&quot;;
                for (i = 0; i &lt; cols; i++) {
                    html += &quot;&lt;td&gt;&quot; + cellPad + &quot;&lt;/td&gt;&quot;;
                }
                html += &quot;&lt;/tr&gt;&quot;;
            }
            html += &quot;&lt;/tbody&gt;&quot;;
            html += &quot;&lt;/table&gt;&quot;;

            var table = new Node(html, null, editor.get(&quot;document&quot;)[0]);
            editor.insertElement(table);
        },
        _fillTableDialog: function () {
            var self = this,
                d = self.dialog,
                selectedTable = self.selectedTable,
                caption = selectedTable.one(&quot;caption&quot;);
            if (self.selectedTd) {
                d.cellpadding.val(
                    parseInt(self.selectedTd.css(&quot;padding&quot;))
                        || &quot;0&quot;);
            }

            d.talign.set(&quot;value&quot;, selectedTable.attr(&quot;align&quot;) ||
                &quot;&quot;);


            d.tborder.val(selectedTable.attr(&quot;border&quot;) ||
                &quot;0&quot;);
            var w = selectedTable.style(&quot;width&quot;) ||
                (&quot;&quot; + selectedTable.width());

            d.tcollapse[0].checked = selectedTable.hasClass(collapseTableClass, undefined);

            //忽略pt单位
            d.twidth.val(w.replace(/px|%|(.*pt)/i, &quot;&quot;));
            if (w.indexOf(&quot;%&quot;) != -1) {
                d.twidthunit.set(&quot;value&quot;, &quot;%&quot;);
            } else {
                d.twidthunit.set(&quot;value&quot;, &quot;px&quot;);
            }

            d.theight.val((selectedTable.style(&quot;height&quot;) || &quot;&quot;)
                .replace(/px|%/i, &quot;&quot;));
            var c = &quot;&quot;;
            if (caption) {
                c = caption.text();
            }
            d.tcaption.val(c);
            var head = selectedTable.first(&quot;thead&quot;),
                rowLength = (selectedTable.one(&quot;tbody&quot;) ?
                    selectedTable.one(&quot;tbody&quot;).children().length : 0)
                    + (head ? head.children(&quot;tr&quot;).length : 0);
            d.trows.val(rowLength);
            d.tcols.val(selectedTable.one(&quot;tr&quot;) ?
                selectedTable.one(&quot;tr&quot;).children().length : 0);
            d.thead.set(&quot;value&quot;, head ? '1' : '');
        },
        _realTableShow: function () {
            var self = this,
                prefixCls = self.editor.get('prefixCls'),
                d = self.dialog;

            if (self.selectedTable) {
                self._fillTableDialog();
                d.get(&quot;el&quot;)
                    .all(replacePrefix(&quot;.{prefixCls}editor-table-create-only&quot;, prefixCls))
                    .attr(&quot;disabled&quot;, &quot;disabled&quot;);
                d.thead.set('disabled', true);
            } else {
                d.get(&quot;el&quot;).all(replacePrefix(&quot;.{prefixCls}editor-table-create-only&quot;, prefixCls))
                    .removeAttr(&quot;disabled&quot;);
                d.thead.set('disabled', false);
            }
            if (self.selectedTd) {
                d.cellpaddingHolder.show();
            } else {
                d.cellpaddingHolder.hide();
            }
            self.dialog.show();
        },
        _prepareTableShow: function () {
            var self = this;
            self._tableInit();
        },
        show: function (cfg) {
            var self = this;
            S.mix(self, cfg);
            self._prepareTableShow();
        },
        destroy: function () {
            destroyRes.call(this);
        }
    });

    return TableDialog;
}, {
    requires: ['editor', '../dialog', '../menubutton']
});</pre>
</body>
</html>
